<!-- release -->
<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
    >
      <el-form-item label="名称" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="summary">
        <el-input
          type="textarea"
          v-model="form.summary"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="要求" prop="description">
        <el-input
          type="textarea"
          v-model="form.description"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="tags">
        <el-tag
          :key="tag"
          v-for="tag in form.tags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
          autocomplete="off"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+ 添加职位类型</el-button
        >
      </el-form-item>
      <el-form-item label="长传图片" prop="images">
        <el-button type="primary" @click="imagecropperShow = true"
          >上传图片</el-button
        >
        <div class="workBacground">
          <div v-for="(img, index) in form.images" :key="index">
            <i
              class="el-icon-circle-close"
              @click="form.images.splice(index, 1)"
            ></i>
            <img :src="img" alt="公司LOGO" />
          </div>
        </div>
        <image-cropper
          v-show="imagecropperShow"
          :key="imagecropperKey"
          :width="300"
          :height="300"
          url="/resources-action/user/self/edit"
          :noCircle="true"
          lang-type="zh"
          @close="close"
          @crop-upload-success="cropSuccess"
          @crop-upload-fail="cropFail"
        />
      </el-form-item>
      <el-form-item label="时薪" prop="wages">
        <el-input v-model="form.wages" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="月薪" prop="salary">
        <el-input
          placeholder="请输入内容"
          v-model="form.salary"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="人数" prop="availableCount">
        <el-input v-model="form.available_count" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="定位" prop="coordinate">
        {{ form.province }}{{ form.city }} {{ form.street }}
        <linMap class="linMap" @mapData="getMapData"></linMap>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import linMap from "@/components/map/map";
import ImageCropper from "@/components/ImageCropper";
import { addWork } from "@/api/workSpalce";
export default {
  name: "relese",
  data() {
    var validateTitle = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入标题"));
      } else {
        callback();
      }
    };
    var validateSummarty = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入职位简介"));
      } else if (value.length < 50) {
        callback(new Error("职位简介字数必须在20和1000之间"));
      } else if (value.length > 2000) {
        callback(new Error("职位简介字数必须在20和1000之间"));
      } else {
        callback();
      }
    };
    var validateDescription = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入职位要求"));
      } else if (value.length < 50) {
        callback(new Error("职位要求字数必须在50和2000之间"));
      } else if (value.length > 2000) {
        callback(new Error("职位要求字数必须在50和2000之间"));
      } else {
        callback();
      }
    };
    var validateTags = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入职位标签"));
      } else if (value.length > 10) {
        callback(new Error("个数必须在1到10之间"));
      } else {
      }
    };
    var validateTags = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入职位标签"));
      } else if (value.length > 10) {
        callback(new Error("个数必须在1到10之间"));
      } else {
        callback();
      }
    };
    var validateWages = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("薪资必须为正数"));
      } else {
        callback();
      }
    };
    var validatSalary = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("薪资必须为正数"));
      } else {
        callback();
      }
    };
    var validatAvailableCount = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("人数必须为正数"));
      } else {
        callback();
      }
    };
    return {
      form: {
        publisher_id: "",
        title: "",
        summary: "",
        description: "",
        tags: [],
        images: [],
        wages: "",
        salary: "",
        province: "",
        city: "",
        street: "",
        coordinate: {
          x: "",
          y: "",
        },
        available_count: 0,
        enabled: true,
      },
      inputVisible: false,
      inputValue: "",
      rules: {
        title: [{ required: true, validator: validateTitle, trigger: "blur" }],
        summary: [
          { required: true, validator: validateSummarty, trigger: "blur" },
        ],
        description: [
          { required: true, validator: validateDescription, trigger: "blur" },
        ],
        tags: [{ required: true, validator: validateTags, trigger: "blur" }],
        images: [
          { required: true, message: "请输入职位图片", trigger: "blur" },
        ],
        coordinate: [{ required: true, message: "请定位职位所在地" }],
        wages: [{ validator: validateWages, trigger: "blur" }],
        salary: [{ validator: validatSalary, trigger: "blur" }],
        availableCount: [{ validator: validatAvailableCount, trigger: "blur" }],
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      dialogFormVisible: false,
    };
  },
  components: { linMap, ImageCropper },
  methods: {
    handleClose(tag) {
      this.form.tags.splice(this.form.tags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue && !this.form.tags.includes(inputValue)) {
        this.form.tags.push(inputValue);
        this.inputVisible = false;
        this.inputValue = "";
      } else if (inputValue != '' && this.form.tags.includes(inputValue)){
        //显示重复错误
        this.$message.warning("标签重复");
      } 
    },
    onSubmit(formName) {
      if ( !(this.form.wages!="" && this.form.salary!="" && this.form.wages < this.form.salary)) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addWork(this.form)
              .then((result) => {
                this.$message.success("职位发布成功");
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.warning("职位发布失败，请完善表单");
            return false;
          }
        });
      } else {
        this.$message.warning("月薪不能小于日新");
      }
    },

    getMapData(data) {
      this.form.province = data.province;
      this.form.city = data.city;
      this.form.street = data.street;
      (this.form.coordinate.x = data.lng), (this.form.coordinate.y = data.lat);
    },
    //上传图片
    cropSuccess(resData) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      this.form.images.push(resData);
    },
    cropFail(error) {
      console.log(error);
    },
    close() {
      this.imagecropperShow = false;
    },
  },
  mounted() {
    this.form.publisher_id = this.$store.state.user.id;
  },
};
</script>
<style lang='scss' scoped>
.linMap {
  width: 100%;
}
.form {
  width: 750px;
  ::v-deep .el-icon-circle-close {
    color: white;
    position: absolute;
    font-size: 26px;
  }
}
.workBacground {
  width: 100%;

  display: flex;
  > div {
    width: 100%;
  }
  //无论有几张图片都填充
  img {
    width: 100%;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
  }
}
</style>